<template>
<div>
  <h1 id="title">Dashboard</h1>
  <div class="crads">
    <el-card class="card1">
       <div class="number">{{sum}}</div>
       <div class="label">资产总数</div>
    </el-card>
    <el-card class="card2">
      <div class="number">{{dispatchSum}}</div>
      <div class="label">可支配资产</div>
    </el-card>
    <el-card class="card3">
      <div class="number">0</div>
      <div class="label">其他</div>
    </el-card>
    <el-card class="card4">
      <div class="number">0</div>
      <div class="label">其他</div>
    </el-card>
  </div>
  <div class="tables">
    <div class="table">
      <AssetTable1></AssetTable1>
    </div>
    <div class="table">
      <AssetTable2></AssetTable2>
    </div>
  </div>
  <div class="tables">
    <div class="table">
      <AssetTable3></AssetTable3>
    </div>
    <div class="table">
      <AssetTable4></AssetTable4>
    </div>
  </div>
</div>
</template>

<script>
import request from "@/utils/request";

import AssetTable1 from "@/components/person/asset/AssetTable1";
import AssetTable2 from "@/components/person/asset/AssetTable2";
import AssetTable3 from "@/components/person/asset/AssetTable3";
import AssetTable4 from "@/components/person/asset/AssetTable4";

export default {
  name: "AssetIndex",
  components: {
    AssetTable1,
    AssetTable2,
    AssetTable3,
    AssetTable4,
  },
  data() {
    return {
      sum: 0,
      dispatchSum: 0,
    }
  },
  computed: {
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      request({
        url: '/asset/assetSum',
        method: 'get'
      }).then(response => {
        if (response && response.data) {
          this.sum = response.data.sum;
          this.dispatchSum = response.data.dispatchSum;
        }
      }).catch(error => {
        console.log('error', error);
        this.$message.error('加载数据失败')
      })
    }
  },
}
</script>

<style scoped>
#title {
  margin-bottom: 10px;
}
.crads {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.crads .el-card {
  width: 24%;
  text-align: center;
}
.card1 {
  background-color: #409eff;
  color: #fff;
}

.card2{
  background: #2c7be5;;
  color: #fff;
}

.card3{
  background: #36c2bc;;
  color: #fff;
}

.card4{
  background: #6dd990;
  color: #fff;
}

.number {
  font-size: 24px;
  margin-bottom: 5px;
}

.label {
  font-size: 14px;
}

.tables {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.table {
  width: 49.4%;
  height: 300px;
  box-shadow: 0 0 10px #ccc;
}
</style>